<div class="row align-items-center justify-content-between mt-2">
  <div class="col-md-auto col-auto col-sm-auto">
    <div class="content-header">
      <h1>个人信息</h1>
    </div>
  </div>
  <div *ngIf="!user?.provider" class="col-md-auto col-auto col-sm-auto">
    <h4 class="widget-title mb-0">
      <button class="btn btn-success btn-sm m-right-10" (click)="changePassword()">
        <i class="fas fa-key"></i>
        更改密码
      </button>
    </h4>
  </div>
</div>
<form [formGroup]="userForm">
  <div class="row">
    <div class="col-md-8">
      <div class="box box-primary">
        <div class="box-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group ">
                <label>姓</label>
                <input formControlName="firstName" class="form-control" type="text">
                <div *ngIf="userForm.get('firstName').touched && userForm.get('firstName').errors">
                  <div class="text-danger" *ngIf="userForm.get('firstName').errors?.required">
                    名不能为空.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group ">
                <label>姓名</label>
                <input formControlName="lastName" class="form-control" type="text">
                <div *ngIf="userForm.get('lastName').touched && userForm.get('lastName').errors">
                  <div class="text-danger" *ngIf="userForm.get('lastName').errors?.required">
                    名字不能为空.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group ">
                <label>手机号</label>
                <input formControlName="phoneNumber" class="form-control" type="number">
                <!-- <div *ngIf="userForm.get('phoneNumber').touched && userForm.get('phoneNumber').errors">
                  <div class="text-danger" *ngIf="userForm.get('phoneNumber').errors?.required">
                    Mobile Number is Required.
                  </div>
                  <div class="text-danger" *ngIf="userForm.get('phoneNumber').errors?.pattern">
                    Mobile number must have 10 digits
                  </div>
                </div> -->
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>邮箱</label>
                <input [attr.disabled]="true" formControlName="email" class="form-control" type="email">
              </div>
            </div>
            <div class="form-group col-md-12">
              <label>地址</label>
              <textarea formControlName="address" class="form-control"></textarea>
            </div>
            <div class="m-top-10 col-md-6">
              <button class="btn btn-success btn-sm m-right-10" (click)="updateProfile()" cdkFocusInitial><i
                  class="fas fa-save"></i> 保存</button>
              <button type="button" class="btn btn-danger btn-sm" [routerLink]="['/']"><i
                  class="fas fa-times-circle"></i>
                取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row justify-content-center">
        <mat-card>
          <mat-card-header>
            <mat-card-title>个人头像</mat-card-title>
          </mat-card-header>
          <input hidden (change)="fileEvent($event)" #fileInput name="logo" type="file" name="Profile Photo"
            fxFlex="30">
          <img class="full-width" [src]="imgURL" />
          <mat-card-actions>
            <button *ngIf="!imgURL" class="btn btn-success btn-sm m-right-10" (click)="fileInput.click()">
              <i class="far fa-image"></i>添加图片</button>
            <button *ngIf="imgURL" class="btn btn-success btn-sm m-right-10  mb-1" (click)="fileInput.click()">
              <i class="far fa-image"></i> 更改图片</button>
            <button *ngIf="imgURL" type="button" (click)="removeImage()" class="btn btn-danger btn-sm">
              <i class="fas fa-trash-alt"></i> 删除图片</button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>
  </div>
</form>
